<script setup lang="ts">
import BlogContent from "@/components/BlogContent/index.vue"
import vdButton from 'vue-devui/button';
import SvgIcon from "@/components/SvgIcon/index.vue";
import AvatarCard from "@/components/AvatarCard/index.vue";
import {getCategoryAllUrl} from "@/api/blog/category.ts";
import {getArticleUrl} from "@/api/blog/article.ts";
import UserBaseCard from "@/views/blog/category/UserBaseCard.vue";
import Tabs from "@/components/Tabs/index.vue";
import DiaryCard from "@/views/diary/DiaryCard.vue";


const articleList = [
  {
    artId: 1,
    artTitle: 'vuepress-theme-blog',
    artTag: ['vuepress', 'theme', 'blog'],
    artCategoryId: '2',
    artCoverUrl: 'https://cdn.seovx.com/ha/?mom=302',
    createTime: '2021-08-01',
    /*发布时间*/
    publishTime: '2021-08-01 12:12:20'
  },
  {
    artId: 2,
    artTitle: 'vuepress-theme-blog',
    artTag: ['vuepress', 'theme', 'blog'],
    artCategoryId: '2',
    artCoverUrl: 'https://cdn.seovx.com/ha/?mom=302',
    createTime: '2021-08-01',
    publishTime: '2021-08-01 12:12:20'
  },
  {
    artId: 3,
    artTitle: 'vuepress-theme-blog',
    artTag: ['vuepress', 'theme', 'blog'],
    artCategoryId: '2',
    artCoverUrl: 'https://cdn.seovx.com/ha/?mom=302',
    createTime: '2021-08-01',
    publishTime: '2021-08-01 12:12:20'
  },
  {
    artId: 4,
    artTitle: 'vuepress-theme-blog',
    artTag: ['vuepress', 'theme', 'blog'],
    artCategoryId: '2',
    artCoverUrl: 'https://cdn.seovx.com/ha/?mom=302',
    createTime: '2021-08-01',
    publishTime: '2021-08-01 12:12:20'
  },
]

const categoryList = ref([])
const activeCategory = ref('')
onMounted(() => {
  // 获取所有的分类
  // getCategoryAllUrl().then(res => {
  //   console.log(res)
  //   categoryList.value = res.data || []
  //   activeCategory.value = categoryList.value[0].bcId
  // })
})
const handleGetArticle = (item: any) => {
  activeCategory.value = item.bcId
}


const showCategory = ref([])
const allCategory = ref([
  {id: 1, name: '程序设计', nums: 102},
  {id: 2, name: 'oj联系', nums: 120},
  {id: 3, name: 'c语言', nums: 12},
  {id: 3, name: 'java', nums: 12},
  {id: 3, name: 'python', nums: 12},
  {id: 3, name: '数据结构', nums: 12},
  {id: 3, name: 'c++', nums: 12},
  {id: 3, name: 'VS Code', nums: 12},
  {id: 3, name: 'VS', nums: 12},
])

const activeTab = ref('tab1')
const tabs = [
  {label: '最近', id: 0, component: 'ComponentA'},
  {label: '文章', id: 1},
]

const fold = ref(false)

onMounted(() => {
  showCategory.value = allCategory.value.slice(0, 6)
})

function openCategory() {
  if (fold.value) showCategory.value = allCategory.value.slice(0, 6)
  else showCategory.value = allCategory.value.slice(0, allCategory.value.length)
  fold.value = !fold.value
}

const articles = ref([
  {
    id: 1,
    title: 'Vue.js 初学者指南',
    publishTime: '2025-04-01',
    likeCount: 25,
    commentCount: 8,
    artCoverUrl: 'https://www.dmoe.cc/random.php',
    summary: '介绍 Vue.js 的基础概念和使用方法。' +
        '介绍 Vue.js 的基础概念和使用方法。介绍 Vue.js 的基础概念和使用方法。介绍 Vue.js 的基础概念和使用方法。' +
        '介绍 Vue.js 的基础概念和使用方法。介绍 Vue.js 的基础概念和使用方法。介绍 Vue.js 的基础概念和使用方法。' +
        '介绍 Vue.js 的基础概念和使用方法。介绍 Vue.js 的基础概念和使用方法。介绍 Vue.js 的基础概念和使用方法。' +
        '介绍 Vue.js 的基础概念和使用方法。介绍 Vue.js 的基础概念和使用方法。介绍 Vue.js 的基础概念和使用方法。' +
        '介绍 Vue.js 的基础概念和使用方法。介绍 Vue.js 的基础概念和使用方法。介绍 Vue.js 的基础概念和使用方法。'
  },
  {
    id: 2,
    title: '深入理解 React 组件',
    publishTime: '2025-04-03',
    likeCount: 42,
    commentCount: 15,
    artCoverUrl: 'https://www.dmoe.cc/random.php',
    summary: '探讨 React 组件的设计与优化技巧。'
  },
  {
    id: 3,
    title: '现代 CSS 布局技术',
    publishTime: '2025-04-05',
    likeCount: 18,
    commentCount: 5,
    summary: 'Flexbox 和 Grid 布局的高级用法。'
  }
])
</script>

<template>
  <BlogContent class="blog-container" :reverse="true">
    <UserBaseCard style="margin-bottom: 16px;"/>
    <template #sidebar>
      <div class="category-card box-shadow-card">
        <div class="title">分类专栏</div>
        <div class="category-item article-meta-link" v-for="(item, index  ) in showCategory" :key="index">
          <span class="name generic-link">{{ item.name }}</span>
          <span class="nums">{{ item.nums }}篇</span>
        </div>
        <div :class="{'category-fold': true, 'reverse': fold}" @click="openCategory">
          <div class="fold-button">
            <SvgIcon icon-class="fold"></SvgIcon>
          </div>
        </div>
      </div>
    </template>
    <template #content>
      <div class="sidebar-content box-shadow-card">
        <d-tabs v-model="activeTab">
          <d-tab id="tab1" title="最近">
            <p>Tab1 Content</p>
          </d-tab>
          <d-tab id="tab2" title="文章">
            <div class="article-list">
              <article v-for="article in articles" :key="article.id" class="article-item">
                <div v-if="!!article?.artCoverUrl" class="article-img">
                  <img :src="(article?.artCoverUrl as string)" :alt="article.title"/>
                </div>
                <div class="article-header">
                  <h3 class="article-title">{{ article.title }}</h3>
                  <div class="article-summary">{{ article.summary }}</div>
                  <div class="article-meta">
                    <span class="publish-time">发布时间：{{ article.publishTime }}</span>
                    <span class="like-count">点赞：{{ article.likeCount }}</span>
                    <span class="comment-count">评论：{{ article.commentCount }}</span>
                  </div>
                </div>
              </article>
            </div>
          </d-tab>
        </d-tabs>
      </div>
    </template>
  </BlogContent>
</template>

<style scoped lang="scss">
.blog-container {
  display: flex;

}

.category-card {
  width: 100%;
  padding: 16px 16px 0 16px;

  .title {
    font-size: 16px;
    line-height: 16px;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid $blog-border-color;
  }

  .category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: black;
    /*孩子选择器*/
    &:not(:last-child) {
      padding-bottom: 16px;
    }

    .name {
      width: 180px;
    }

    .nums {
      color: #B3AFBE;
    }
  }

  .category-fold {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    cursor: pointer;
    color: #B3AFBE;
    margin-top: -16px;

    .fold-button {
      width: 36px;
      height: 18px;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: $blog-dim-bg-color;
    }

    &.reverse {
      transform: rotate(180deg);
    }
  }
}


.sidebar-content {
  width: 100%;
  height: 100%;
  color: #B3AFBE;
  font-size: 14px;
  line-height: 20px;
  padding: 2px 16px;
}

.article-list {
  display: flex;
  flex-direction: column;
  margin-top: -24px;
  z-index: 1;
}

.article-item {
  display: flex;
  flex-direction: row;
  padding: 24px 0;

  &:not(:last-child) {
    border-bottom: 1px solid #eaeaee; /* 使用 $blog-border-color */
  }

  .article-img {
    width: 178px;
    height: 100px;
    overflow: hidden;
    margin-right: 16px;
    flex-shrink: 0; /* 防止图片缩小 */
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 4px;
      overflow: hidden;
    }
  }

  .article-header {
    display: flex;
    flex-direction: column;

    .article-title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin: 0;
      cursor: pointer;

      &:hover {
        color: $blog-link-color;
      }
    }

    .article-summary {
      height: 42px;
      margin-top: 8px;
      color: #555666;
      //margin-top: 4px;
      line-height: 19px;
      overflow: hidden;
      white-space: normal;
      word-break: break-word;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .article-meta {
      order: 3; /* 设置 order 为一个较大的值 */
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #666;
      margin-top: 12px;

      span {
        margin-right: 10px;
      }
    }
  }

}
</style>
